<template>
<div>
    <a-drawer
    :width="1000"
    title="签约详情"
    placement="right"
    @close="onClose"
    :visible="visible">
        <a-card :bordered="false" title="个人信息">
            <detail-list :col="2">
                <detail-list-item term="姓名">{{detail.name}}</detail-list-item>
                <detail-list-item term="签约方式">{{detail.typeName}}</detail-list-item>
                <detail-list-item term="身份证号码">{{detail.idCard}}</detail-list-item>
                <detail-list-item term="签约状态">{{detail.statusName}}</detail-list-item>
                <detail-list-item term="手机号码">{{detail.phone}}</detail-list-item>
                <detail-list-item term="实名状态">{{detail.idCardFront ? '已小程序实名认证':'已短信实名认证'}}</detail-list-item>
            </detail-list>
        </a-card>
        <a-card
        style="margin-top: 24px"
        :bordered="false"
        :tabList="tabList"
        :activeTabKey="activeTabKey"
        @tabChange="tabChanges">
            <a-table 
            :scroll="{ x: 1600 }" 
            :columns="table.columns" 
            :pagination="table.pagination" 
            @change="handleTableChange" 
            rowKey="id" 
            :data-source="table.loadData">
                <span slot="action" slot-scope="text, record">
                    <a @click="handleExpand(record)">详情</a>
                </span>
            </a-table>
        </a-card>
    </a-drawer>
     <a-drawer
    :width="800"
    title="任务详情"
    placement="right"
    @close="innerVisible=false"
    :visible="innerVisible">
        <a-card :bordered="false">
            <detail-list :col="2">
                <detail-list-item term="任务编号">{{taskDetail.taskId}}</detail-list-item>
                <detail-list-item term="任务名称">{{fieldForm.fieldTaskName}}</detail-list-item>
                <detail-list-item term="服务类型">{{fieldForm.fieldTaskType}}</detail-list-item>
                <detail-list-item term="任务类型">{{taskDetail.type === 1 ? '线上':'线下'}}</detail-list-item>
                <detail-list-item term="园区服务商">{{taskDetail.parkName}}</detail-list-item>
                <detail-list-item term="工作地点">{{cityLabel}}</detail-list-item>
                <detail-list-item term="需要人数">{{fieldForm.fieldTaskPeopleNumber}}</detail-list-item>
                <detail-list-item term="创建时间">{{taskDetail.publishTime}}</detail-list-item>
            </detail-list>
            <detail-list :col="1">
                <detail-list-item term="执行时间">{{fieldForm.fieldTaskStartDate}} - {{fieldForm.fieldTaskEndDate}}</detail-list-item>
                <detail-list-item term="任务描述">{{fieldForm.fieldTaskDescription}}</detail-list-item>
            </detail-list>
        </a-card>
    </a-drawer>
</div>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
import { allGetSginDetail } from '@/api/manage/sign'
import {
    COLUMNS_SIGN_TASK_RECORD,
    COLUMNS_SIGN_RECORD,
    COLUMNS_SIGN_SETT_RECORD
} from './form'
import {
    CITY_DATA,
    TASK_CATEGORY_DATA
} from '@/config/baseData'
import { 
    allOnlineTaskDetail
} from '@/api/manage/task'
import { 
    allIdCardQuerySettleDetail,
} from '@/api/manage/sttle'
export default {
    name: 'UserSignDetail',
    components: {
        DetailList,
        DetailListItem
    },
    data () {
        return {
            tabList: [
                {key: '1',tab: '任务记录'},
                {key: '2',tab: '签约记录'},
                {key: '3',tab: '结算记录'}
            ],
            activeTabKey: '1',
            id:'',
            idCard:'',
            detail:{
                authentication: '',
                idCard: "",
                idCardFront: '',
                idCardReverse: '',
                image: '',
                name: "",
                phone: "",
                status: '',
                statusName:'',
                type: '',
                typeName:''
            },
            table:{
                columns:COLUMNS_SIGN_TASK_RECORD,
                loadData:[],
                pagination:{
                    pageNum:1,
                    pageSize: 10,
                    total:0,
                    showSizeChanger: true,
					showQuickJumper: true,
                    pageSizeOptions: ["10", "20", "50", "100"],
                    showTotal: total => `共有 ${total} 条数据`
                }
            },
            visible:false,
            innerVisible:false,
            taskDetail:{},
            fieldForm:{
                fieldTaskDeliver: "",
                fieldTaskDescription: "",
                fieldTaskEnroll: "",
                fieldTaskStartDate: "",
                fieldTaskEndDate: "",
                fieldTaskName: "",
                fieldTaskPark: "",
                fieldTaskPeopleNumber: "",
                fieldTaskPrice: "",
                fieldTaskRegion: "",
                fieldTaskType: ""
            },
            cityLabel:'',
            serverName:''
        }
    },
    methods: {
        add(item){
            this.activeTabKey = '1';
            this.id = item.id;
            this.idCard = item.idCard;
            this.visible = true;
            this.loadTable(true);
        },
        async loadTable(flag){
            let params = {};
            if(this.activeTabKey === '3'){
                params.idCard = this.idCard;
            }else{
                params.id = this.id;
            }
            if(flag){
                this.table.pagination.pageNum = 1;
                this.table.pagination.pageSize = 10;
            }
            params.pageNum = this.table.pagination.pageNum;
            params.pageSize = this.table.pagination.pageSize;
            const {code,data} = this.activeTabKey === '3' ? await allIdCardQuerySettleDetail(params) : await allGetSginDetail(params);
            if(code ==='1'){
                if(this.activeTabKey === '1'){
                    this.table.loadData = data.task;
                }else if(this.activeTabKey === '2'){
                    this.table.loadData = data.sign;
                }else if(this.activeTabKey === '3'){
                    this.table.loadData =data.content;
                }
                this.table.pagination.total = data.total || 0;
                Object.assign(this.detail,data.user)
                if(this.detail.type === 1){
                    this.detail.typeName = '--';
                }else if(this.detail.type === 2){
                    this.detail.typeName = '短信签约';
                }else if(this.detail.type === 3){
                    this.detail.typeName = '小程序签约';
                }else if(this.detail.type === 4){
                    this.detail.typeName = '线下签约';
                }

                if(this.detail.status === 1){
                    this.detail.statusName = '未签约';
                }else if(this.detail.status === 2){
                    this.detail.statusName = '已签约';
                }else if(this.detail.status === 3){
                    this.detail.statusName = '待签约';
                }else if(this.detail.status === 4){
                    this.detail.statusName = '签约失败';
                }
            }
        },
        tabChanges(keys){
            this.activeTabKey = keys;
            if(this.activeTabKey === '1'){
                this.table.columns = COLUMNS_SIGN_TASK_RECORD;
            }else if(this.activeTabKey === '2'){
                this.table.columns = COLUMNS_SIGN_RECORD;
            }else if(this.activeTabKey === '3'){
                this.table.columns = COLUMNS_SIGN_SETT_RECORD;
            }
            this.loadTable();
        },
        async handleExpand(item){
            const {code,data} = await allOnlineTaskDetail(item.id);
            if(code === '1'){
                Object.assign(this.taskDetail,data);
                for(var key in data.dynamicFields){
                    if(data.dynamicFields.hasOwnProperty(key) && this.fieldForm.hasOwnProperty(key)){
                        this.fieldForm[key] = data.dynamicFields[key];
                    }
                }
                CITY_DATA.forEach(v => {
                    if(v.value == this.fieldForm.fieldTaskRegion){
                        this.cityLabel = v.label;
                    }
                });
                this.innerVisible = true;
            }
        },
        handleTableChange(pagination){
            this.table.pagination.pageNum = pagination.current;
            this.table.pagination.pageSize = pagination.pageSize;
            this.loadTable(false);
        },
        onClose(){
            this.visible = false
        }
    }
}
</script>
<style>
.ant-table-placeholder{
    padding: 0 !important;
    border-top:none !important;
}
.ant-table-body {
    overflow-x: auto !important;
}
</style>
